<template>
  <div id='Detail'>
    <detail-nav-bar class="detail-nav" :title="title" @centerclick="navcenterclick" ref="detailnavbar" />
    <b-scroll class="content" :probeType="3" ref="bscroll" @scroll="bscroll">
      <detail-swiper :topimg="topimg" />
      <good-info :goodinfo="goodinfo" />
      <detail-shopinfo :shopinfo="shopinfo" />
      <detail-info :detailinfo="detailinfo" @imgload="imgload"></detail-info>
      <item-params :itemparams="itemparams" ref="itemparamslist"></item-params>
      <detail-rate :rate="rate" ref="ratelist"></detail-rate>
      <goods-list :goods="recommendlist" ref="goodslist"></goods-list>
    </b-scroll>
    <detail-bottom-bar @cartclick="cartclick"></detail-bottom-bar>
  </div>
</template>

<script>
  import DetailNavBar from './detailchildcomps/DetailNavBar.vue'
  import DetailSwiper from './detailchildcomps/DetailSwiper.vue'
  import GoodInfo from './detailchildcomps/GoodInfo.vue'
  import DetailShopinfo from './detailchildcomps/DetailShopinfo.vue'
  import BScroll from 'components/common/BetterScroll/BScroll.vue'
  import DetailInfo from './detailchildcomps/DetailInfo.vue'
  import ItemParams from './detailchildcomps/ItemParams.vue'
  import DetailRate from './detailchildcomps/DetailRate.vue'
  import GoodsList from 'components/content/goodlist/GoodsList.vue'
  import DetailBottomBar from './detailchildcomps/DetailBottomBar.vue'

  import { getdetail, Goodinfo, Shopinfo, getrecommend } from 'network/detail.js'
  import { debounce } from 'common/utils.js'
  import { newmixin } from 'common/mixins.js'

  export default {
    name: 'Detail',
    data() {
      return {
        iid: null,
        title: ['商品', '参数', '评论', '推荐'],
        topimg: [],
        goodinfo: {},
        shopinfo: {},

        detailinfo: {},
        itemparams: {},
        rate: {},
        recommendlist: [],
        themeY: [],
        positionY: 0,
      }
    },
    mixins: [newmixin],
    created() {
      this.iid = this.$route.params.iid
      getdetail(this.iid).then(res => {
        console.log(res);
        const data = res.data.result;
        this.topimg = data.itemInfo.topImages
        this.goodinfo = new Goodinfo(data.itemInfo, data.columns, data.shopInfo.services)
        this.shopinfo = new Shopinfo(data.shopInfo)
        this.detailinfo = data.detailInfo
        this.itemparams = data.itemParams
        if (data.rate.cRate !== 0) {
          this.rate = data.rate.list[0]
        }
        // 图片未渲染
        // this.$nextTick(() => {
        //   this.themeY.push(0)
        //   this.themeY.push(this.$refs.itemparamslist.$el.offsetTop)
        //   this.themeY.push(this.$refs.ratelist.$el.offsetTop)
        //   this.themeY.push(this.$refs.goodslist.$el.offsetTop)
        //   console.log(this.themeY);
        // })
        // 数据未获取
        // this.themeY.push(0)
        // this.themeY.push(this.$refs.itemparamslist.$el.offsetTop)
        // this.themeY.push(this.$refs.ratelist.$el.offsetTop)
        // this.themeY.push(this.$refs.goodslist.$el.offsetTop)

      })
      getrecommend().then(res => {
        this.recommendlist = res.data.data.list
      })
    },
    mounted() {
      // 数据未获取
      // this.themeY.push(0)
      // this.themeY.push(this.$refs.itemparamslist.$el.offsetTop)
      // this.themeY.push(this.$refs.ratelist.$el.offsetTop)
      // this.themeY.push(this.$refs.goodslist.$el.offsetTop)
    },
    updated() {
      // 未获取图片
      // if (this.$refs.itemparamslist.$el && this.$refs.goodslist.$el && this.$refs.itemparamslist.$el) {
      //   this.$nextTick(() => {
      //     this.themeY = []
      //     this.themeY.push(0)
      //     this.themeY.push(this.$refs.itemparamslist.$el.offsetTop)
      //     this.themeY.push(this.$refs.ratelist.$el.offsetTop)
      //     this.themeY.push(this.$refs.goodslist.$el.offsetTop)
      //     console.log(this.themeY);
      //   })

      // }

    },
    destroyed() {
      this.$bus.$off('goodimgload', this.itemimgload)
    },
    components: {
      DetailNavBar,
      DetailSwiper,
      GoodInfo,
      DetailShopinfo,
      BScroll,
      DetailInfo,
      ItemParams,
      DetailRate,
      GoodsList,
      DetailBottomBar
    },
    methods: {
      imgload() {
        this.$refs.bscroll.refresh()
        if (this.$refs.itemparamslist.$el && this.$refs.goodslist.$el && this.$refs.itemparamslist.$el) {
          this.$nextTick(() => {
            this.themeY = []
            this.themeY.push(0)
            this.themeY.push(this.$refs.itemparamslist.$el.offsetTop)
            this.themeY.push(this.$refs.ratelist.$el.offsetTop)
            this.themeY.push(this.$refs.goodslist.$el.offsetTop)
            // console.log(this.themeY);
          })
        }
      },
      navcenterclick(index) {
        this.$refs.bscroll.scrollTo(0, -this.themeY[index] - 44)
      },
      bscroll(position) {
        this.positionY = -position.y
        if (this.positionY >= this.themeY[3]) {
          this.$refs.detailnavbar.currentindex = 3
        } else if (this.positionY >= this.themeY[2]) {
          this.$refs.detailnavbar.currentindex = 2
        } else if (this.positionY >= this.themeY[1]) {
          this.$refs.detailnavbar.currentindex = 1
        } else {
          this.$refs.detailnavbar.currentindex = 0
        }
      },
      cartclick() {
        const product = {}
        product.img = this.topimg[0]
        product.iid = this.iid
        product.title = this.goodinfo.title
        product.price = this.goodinfo.realprice
        product.desc = this.goodinfo.desc

        this.$store.dispatch('addCart', product)
      }
    }
  }
</script>

<style scoped>
  #Detail {
    position: relative;
    z-index: 4;

    background-color: #fff;
    height: 100vh;
  }

  .content {
    /* position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0;
    right: 0; */
    /* margin-top: 44px; */
    height: calc(100% - 44px - 49px);
    overflow: hidden;

  }
</style>